<template>
  <section>
    <tabs v-if="needTabs" @tab-change="tabChange" :tab-list="tabList" />
    <raw-table :columns="tableColumn" :data-source="tableData"></raw-table>
  </section>
</template>

<script setup lang="ts">
  import { TableColumn, TableData } from './indexConfig'
  import type { TableColumnsType } from 'ant-design-vue'
  import Tabs from '../Tabs/index.vue'

  interface Props {
    tableColumn?: TableColumnsType
    tableData?: Record<string, any>[]
    needTabs?: boolean
    tabList?: any
  }

  withDefaults(defineProps<Props>(), {
    tableColumn: () => TableColumn,
    tableData: () => TableData,
    needTabs: false,
    tabList: () => [
      { label: '空情数据', value: 'air' },
      { label: '海情数据', value: 'sea' }
    ]
  })

  const emit = defineEmits(['tab-change'])

  const tabChange = (value: string) => {
    emit('tab-change', value)
  }
</script>

<style lang="less" scoped>
  section {
    min-width: 400px;
    padding: 12px 10px 10px 10px;
    background: linear-gradient(180deg, rgba(209, 234, 255, 0.8), #ffffff);
    border: 1px solid #ffffff;
    border-radius: 4px;
    backdrop-filter: blur(3px);

    :deep(.ant-table-wrapper) {
      .ant-table {
        background-color: unset;
        .ant-table-thead {
          .ant-table-cell {
            color: #fff;
            background-color: #48a8e2;
            padding: 10px;
          }
        }
        .ant-table-tbody {
          .ant-table-cell {
            padding: 8px;
          }
          .ant-table-row:nth-child(odd) {
            // background-color: rgb(230, 242, 254);
          }
          .ant-table-row:nth-child(even) {
            background-color: rgb(219, 239, 251, 0.6);
          }
        }
      }
      .ant-pagination {
        margin: 0 !important;
        margin-top: 4px !important;
        justify-content: center !important;
      }
    }
  }
</style>
